<template>
  <div class="main-center">
    <div class="titles">数字果业 长武红</div>
    <div class="show-box" v-if="isshowMsg">
      <div class="name">{{ showMsg.name }}</div>
      <div class="name1">果园面积{{ showMsg.area }}万亩</div>
      <div class="name1">挂果面积{{ showMsg.areaFruiting }}万亩</div>
      <div class="name1">挂果率{{ showMsg.fruitingRatio }}</div>
      <div class="name1">产量{{ showMsg.prodNum }}万吨</div>
      <div class="name1">产值{{ showMsg.prodVal }}亿元</div>
    </div>
    <i
      class="el-icon-menu"
      style="
        border: #ff5858 solid 1px;
        position: absolute;
        top: 10px;
        right: 10px;
        font-size: 36px;
        cursor: pointer;
        z-index: 1000; /* 确保图标在最上层 */
      "
      @click="showDialog = true"
    ></i>

    <!-- <mymap></mymap> -->

    <maps @tipChange="tipChange" @digChange="digChange" :compenyData="datas" />

    <el-dialog :visible.sync="showDialog" :modal="false">
      <div class="monitor-point-list">
        <el-row>
          <el-col :span="24">
            <div class="title">
              <h2>监测点列表</h2>
            </div>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form
              :inline="true"
              :model="formInline"
              class="demo-form-inline"
            >
              <el-form-item>
                <el-select
                  v-model="formInline.monitorPoint"
                  placeholder="请选择监测点名称"
                >
                  <el-option
                    v-for="item in monitorPoints"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  ></el-option>
                </el-select>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="handleSearch">查询</el-button>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
              <el-tab-pane
                label="全部"
                name="all"
                class="tab-pane"
              ></el-tab-pane>
              <el-tab-pane
                label="在线"
                name="online"
                class="tab-pane"
              ></el-tab-pane>
              <el-tab-pane
                label="预警"
                name="alert"
                class="tab-pane"
              ></el-tab-pane>
              <el-tab-pane
                label="离线"
                name="offline"
                class="tab-pane"
              ></el-tab-pane>
            </el-tabs>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-table :data="tableData" border style="width: 100%">
              <el-table-column
                prop="monitorPointName"
                label="监测点名称"
              ></el-table-column>
              <el-table-column
                prop="onlineStatus"
                label="在线状态"
              ></el-table-column>
            </el-table>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-pagination
              background
              layout="prev, pager, next, jumper"
              :total="total"
              :current-page="currentPage"
              @current-change="handleCurrentChange"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import maps from "../components/divMap.vue";
import mymap from "../components/mymap.vue";

export default {
  props: ["divData"],
  components: { mymap, maps },
  data() {
    return {
      showMsg: {},
      centerData: [],
      isshowMsg: false,
      digShow: true,
      showName: "",
      datas: [],
      showDialog: false,

      formInline: {
        monitorPoint: "",
      },
      monitorPoints: [
        { value: "option1", label: "洪家镇" },
        { value: "option2", label: "彭公镇" },
        { value: "option3", label: "巨家镇" },
        // 更多选项...
      ],
      activeName: "all",
      tableData: [
        { monitorPointName: "洪家镇", onlineStatus: "在线" },
        { monitorPointName: "彭公镇", onlineStatus: "离线" },
        { monitorPointName: "巨家镇", onlineStatus: "离线" },
        // 其他表格数据...
      ],
      total: 0,
      currentPage: 1,
    };
  },
  watch: {
    divData: {
      handler(newValue) {
        // console.log(newValue)
        this.datas = newValue;
      },
    },
  },
  mounted() {
    this.getTown();
  },
  methods: {
    handleSearch() {
      // 查询逻辑...
       // 假设 item 是你想要传递的数据
    const item = { /* 你的数据 */ };
    
    // 使用 Element UI 的 MessageBox 组件来显示提示信息
    this.$alert(this.formatter(item), '提示', {
      dangerouslyUseHTMLString: true,
      confirmButtonText: '确定',
    });
    },
    
  formatter(item) {
    if (item.componentSubType != "scatter") return '';
    this.hookToolTip = item;
    var tipHtml =
      `<div style='margin:.28rem 0 0 .35rem;color:#fff;'>` +
      `<p style='display:flex;justify-content: space-between;font-size: 18px;font-weight: 600;'><span>${item.data[2].name}</span><img style='width:20px;height:20px;margin-right:80px;' src='${item.data[2].logoImg}' /></p>` +
      `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:16px;'>产业园地址：` +
      item.data[2].address +
      "</span>" +
      `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园负责人：` +
      item.data[2].operateName +
      "</span>" +
      `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园产量：` +
      item.data[2].fruitProd.prodNum +
      "万吨</span>" +
      `<span style='display:block;font-size: 14px;font-weight: 400;margin-top:13px;'>产业园产值：` +
      item.data[2].fruitProd.prodVal +
      "亿元</span>" +
      `<div class='utlto'  id='btn-tooltip' data-query='${item.data[2].fruitProd.url}'>跳转果园</div>` +
      "</div>";
    return tipHtml;
  },
    handleTabClick(tab, event) {
      // 标签切换逻辑...
    },
    handleCurrentChange(val) {
      // 分页切换逻辑...
    },
    closeDialog() {
      // 关闭对话框逻辑...
    },
    //点击区域名称
    tipChange(e) {
      this.isshowMsg = false;
      if (this.showName == e.name) {
        this.showName = "";
        this.showMsg = {};
        this.isshowMsg = false;
      } else {
        this.showName = e.name;
        this.centerData.forEach((v) => {
          if (v.name == e.name) {
            this.isshowMsg = true;
            this.showMsg = v;
          }
        });
      }
    },
    //公司弹窗
    digChange(e) {
      this.$emit("showDig", e);
     
    },
    async getTown() {
      let { data: res } = await this.$https.get("control/cms/findAllFruitTown");
      if (res.code != 200) return;
      this.centerData = res.data;
    },
    // 图标点击事件处理函数
  },
};
</script>

<style lang="less" scoped>
@font-face {
  font-family: "SC-song";
  src: url("../assets/siyuanSong.woff");
  font-weight: normal;
  font-style: normal;
}
.main-center {
  flex: 1;
  border: red 1px solid;
  height: 100%;
  position: relative;

  .dig-box {
    z-index: 999999;
    position: absolute;
  }

  .titles {
    border: red 1px solid;
    width: 400px;
    margin-top: 20px;
    height: 80px;
    background-image: url("../assets/toptitlebg.png");
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    left: calc(50% - 200px);
    font-size: 40px;
    font-family: Songti SC;
    font-weight: 900;
    font-style: italic;
    color: #ff5858;
    -webkit-text-stroke: 1px #fff;
    text-align: center;
    line-height: 80px;
    font-family: "SC-song";
  }

  .show-box {
    width: 300px;
    height: 240px;
    background-image: url("../assets/zhengs.png");
    background-size: 100% 100%;
    z-index: 999999;
    position: absolute;
    padding-left: 40px;
    bottom: 0;
    left: 0px;
    font-size: 16px;
    font-weight: 400;
    color: #feffff;

    .name {
      margin-top: 35px;
      font-weight: 600;
      font-size: 16px;
      margin-bottom: 12px;
    }

    .name1 {
      margin: 7px 0 6px 0;
      padding-left: 10px;
      font-size: 14px;
    }
  }
}

.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.close-btn {
  font-size: 24px;
  cursor: pointer;
}

.tab-pane {
  background-color: #f5f7fa;
  border-radius: 4px;
  margin-right: 10px;
}

.tab-pane.active {
  background-color: #409eff;
  color: #fff;
}

/* 自定义遮罩层样式 */
.el-dialog__wrapper::v-deep .el-dialog__mask {
  background-color: rgba(0, 0, 0, 0.3); /* 调整透明度和颜色 */
}
</style>